<template>
  <div class="test-container">
    <h1>视频播放器测试</h1>
    
    <div class="test-section">
      <h2>1. 测试MP4视频</h2>
      <VideoPlayer
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        :width="640"
        :height="360"
        :autoplay="false"
      />
    </div>

    <div class="test-section">
      <h2>2. 测试HLS视频</h2>
      <VideoPlayer
        src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        :width="640"
        :height="360"
        :autoplay="false"
      />
    </div>

    <div class="test-section">
      <h2>3. 测试RTSP视频</h2>
      <VideoPlayer
        src="rtsp://223.113.67.182:554/openUrl/GANukmY"
        :width="640"
        :height="360"
        :autoplay="false"
      />
    </div>

    <div class="test-section">
      <h2>4. 调试工具</h2>
      <router-link to="/video-debug" class="debug-link">
        打开视频调试工具
      </router-link>
    </div>
  </div>
</template>

<script setup>
import VideoPlayer from '@/components/VideoPlayer.vue'
</script>

<style scoped>
.test-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h2 {
  color: #333;
  margin-bottom: 15px;
}

.debug-link {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.debug-link:hover {
  background: #0056b3;
}
</style>